<template>
	<view class="page">
		<!-- 视频播放 -->
		<view class="player">
			<video id="myTrailer" :src="trailerInfo.trailer" :poster="trailerInfo.poster" class="movie" controls></video>
		</view>
		<!-- 影片基本信息 -->
		<view class="movie-info">
			<navigator :url="'../cover/cover?cover=' + trailerInfo.cover "><image :src="trailerInfo.cover" class="cover"></image></navigator>

			<view class="movie-desc">
				<view class="title">
					{{trailerInfo.name}}
				</view>
				<view class="basic-info">{{trailerInfo.basicInfo}}</view>
				<view class="basic-info">{{trailerInfo.originalName}}</view>
				<view class="basic-info">{{trailerInfo.totalTime}}</view>
				<view class="basic-info">{{trailerInfo.releaseDate}}</view>

				<view class="score-block">
					<view class="big-score">
						<view class="score-words">综合评分:</view>
						<view class="movie-score">{{trailerInfo.score}}</view>
					</view>
					<view class="score-stars">
						<block v-if="trailerInfo.score >= 0">
							<trailerStars :innerScore="trailerInfo.score" showNum="0"></trailerStars>
						</block>
						<view class="prise-counts">
							{{trailerInfo.prisedCounts}} 人点赞
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="line-wapper">
			<view class="line"></view>
		</view>
		<!-- 剧情介绍 start-->
		<view class="plots-block">
			<view class="plots-title">剧情介绍</view>
			<view class="plots-desc">{{trailerInfo.plotDesc}}</view>
		</view>
		<!-- 剧情介绍 end-->

		<!-- 演示人员 start -->
		<view class="scroll-block">
			<view class="plots-title">演职人员</view>
			<scroll-view scroll-x="true" class="scroll-list">

				<view class="actor-wapper" v-for="(item,index) in directorArray" :key="index">
					<image :src="item.photo" class="single-actor" mode="aspectFill" @click="lookStaffs" :data-staffIndex="index"></image>
					<view class="actor-name">{{item.name}}</view>
					<view class="actor-role">{{item.actName}}</view>
				</view>
				<view class="actor-wapper" v-for="(actor,index1) in actorArray" :key="index1">
					<image :src="actor.photo" class="single-actor" mode="aspectFill" @click="lookStaffs" :data-staffIndex="index1 + directorArray.length"></image>
					<view class="actor-name">{{actor.name}}</view>
					<view class="actor-role">{{actor.actName}}</view>
				</view>
			</scroll-view>
		</view>
		<!-- 演职人员 end -->

		<!-- 剧照 start -->
		<view class="scroll-block">
			<view class="plots-title">剧照</view>
			<scroll-view scroll-x="true" class="scroll-list">
				<image v-for="(item,index) in plotPicsArray" :key="index" :src="item" class="plots-image" mode="aspectFill" @click="lookMe" :data-imgIndex="index"></image>
			</scroll-view>
		</view>
		<!-- 剧照 end -->

	</view>
</template>

<script>
	import trailerStars from "../../components/trailerStars.vue"
	export default {
		components: {
			trailerStars
		},
		data() {
			return {
				trailerInfo: {},
				plotPicsArray: [], //剧照
				directorArray: [], //导演列表
				actorArray: [], //演员列表
			}
		},
		//页面初次渲染，获取上下文
		onReady() {
			this.videoContext = uni.createVideoContext('myTrailer')
		},
		//页面隐藏
		onHide() {
			this.videoContext.pause()
		},
		//显示
		onShow() {
			// if(this.videoContext){
			// 	this.videoContext.play()
			// }
			
		},
		onLoad(param) {
			var trailerid = param.trailerId;
			
			//修改导航栏颜色
			uni.setNavigationBarColor({
				frontColor:"#FFFFFF",
				backgroundColor:"#000000"
			})
			uni.setNavigationBarTitle({
				title:"电影详情"
			})
			this.refresh(trailerid);
			this.getDictor(trailerid);
			this.getActor(trailerid);
			
		},
		created() {

		},
		onNavigationBarButtonTap(e) {
			var index = e.index;
			var me = this;
			var trailerInfo =  me.trailerInfo;
			var trailerId = trailerInfo.id;
			var trailerName = trailerInfo.name;
			var cover = trailerInfo.cover;
			var poster = trailerInfo.poster;
			
			if(index == 0){//分享
				uni.share({
				    provider: "weixin",
				    scene: "WXSenceTimeline",
				    type: 0,
				    href: "http://www.imovietrailer.com/#/pages/movie/movie?trailerId="+trailerId,
				    title: "超英预告:《"+trailerName+"》",
				    summary: "超英预告:《"+trailerName+"》",
				    imageUrl: cover,
				    success: function (res) {
				        
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			}
		},
		//只支持小程序
		onShareAppMessage(res) {
			var me = this;
			return{
				title:me.trailerInfo.name,
				path:'/pages/movie/movie?trailerId=' + me.trailerInfo.id
			}
		},
		methods: {
			refresh(e) {
				var me = this;
				uni.showLoading({
					title: '请稍后...',
					mask: true
				});
				uni.showNavigationBarLoading();

				//猜你喜欢
				var serverUrl = me.serverUrl;
				uni.request({
					url: serverUrl + '/search/trailer/' + e + '?qq=3316368400',
					method: "POST",
					success: (res) => {
						// debugger
						// console.log(res.data);
						if (res.data.status == 200) {
							var trailerInfo = res.data.data;
							this.trailerInfo = trailerInfo;
							//字符串转换为json
							var plotPicsArray = JSON.parse(trailerInfo.plotPics);
							me.plotPicsArray = plotPicsArray;

						}
					},
					complete: () => {
						uni.hideLoading()
						uni.hideNavigationBarLoading()
						// uni.stopPullDownRefresh()
					}
				})
			},
			//获取导演
			getDictor(e) {
				var me = this;
				uni.showLoading({
					title: '请稍后...',
					mask: true
				});
				uni.showNavigationBarLoading();

				//获取导演
				var serverUrl = me.serverUrl;
				uni.request({
					url: serverUrl + '/search/staff/' + e + '/1?qq=3316368400',
					method: "POST",
					success: (res) => {

						// console.log(res.data);
						if (res.data.status == 200) {
							me.directorArray = res.data.data;
						}
					},
					complete: () => {
						uni.hideLoading()
						uni.hideNavigationBarLoading()
						// uni.stopPullDownRefresh()
					}
				})
			},
			//获取演员
			getActor(e) {
				var me = this;
				uni.showLoading({
					title: '请稍后...',
					mask: true
				});
				uni.showNavigationBarLoading();

				var serverUrl = me.serverUrl;
				uni.request({
					url: serverUrl + '/search/staff/' + e + '/2?qq=3316368400',
					method: "POST",
					success: (res) => {

						// console.log(res.data);
						if (res.data.status == 200) {
							me.actorArray = res.data.data;
						}
					},
					complete: () => {
						uni.hideLoading()
						uni.hideNavigationBarLoading()
						// uni.stopPullDownRefresh()
					}
				})
			},
			
			lookMe(e){
				var me = this;
				var imgIndex = e.currentTarget.dataset.imgindex;
				uni.previewImage({
					current:me.plotPicsArray[imgIndex],
					urls:me.plotPicsArray,
					loop:true
				})
			},
			lookStaffs(e){
				var me = this;
				var imgIndex = e.currentTarget.dataset.staffindex;
				//拼接导演和演员的数组
				var directorArray = me.directorArray;
				var actorArray = me.actorArray;
				var newStaffArray = [];
				newStaffArray = newStaffArray.concat(directorArray).concat(actorArray);
				var urls = [];
				for(var i = 0; i < newStaffArray.length; i++){
					var tmepPhoto = newStaffArray[i].photo;
					urls.push(tmepPhoto);
				}
				uni.previewImage({
					current:urls[imgIndex],
					urls:urls,
					loop:true
				})
			}

		}
	}
</script>

<style>
	@import url("movie.css");
</style>
